<!doctype html>
<html manifest="DatabaseExample.manifest">
<head>
<title>Joose ORM Demo</title>

<script type="text/javascript" src="../lib/Joose.js"></script>
<script type="text/javascript">
joose.loadComponents("../lib")

function $(id) {
	return document.getElementById(id)
}

</script>

<script type="text/javascript">
JooseGearsInitializeGears();
            
if((!window.google || !window.google.gears) && !window.openDatabase) {
    alert("This example requires a HTML5 database (currently Safari, etc.) or Google Gears enabled browser.")
}
</script>

<script type="text/javascript" src="../lib/JooseX/DOMBinding/JQuery.js"></script>
<script type="text/javascript" src="../lib/JooseX/DelayedExecution.js"></script>
<script type="text/javascript" src="simple_orm/async/ORM.js"></script>
<script type="text/javascript" src="blok/static/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="blok/static/jquery.ui.all.min.js"></script>
<script type="text/javascript" src="sticky_notes.js"></script>

<style>
body {
    font-family: 'Lucida Grande', 'Helvetica', sans-serif;
}

.note {
    background-color: rgb(255, 240, 70);
    height: 250px;
    padding: 10px;
    position: absolute;
    width: 200px;
    -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
    display: none;
    cursor: move;
}

.note:hover .closebutton {
    display: block;
} 

.closebutton {
    display: none;
    background-image: url(pics/deleteButton.png);
    height: 30px;
    position: absolute;
    left: -15px;
    top: -15px;
    width: 30px;
    cursor: default;
}

.closebutton:active {
    background-image: url(pics/deleteButtonPressed.png);
}

.edit {
    outline: none;
}

.timestamp {
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    font-size: 9px;
    background-color: #db0;
    color: white;
    border-top: 1px solid #a80;
    padding: 2px 4px;
    text-align: right;
}

textarea {
	width:  100%;
	height: 100%;
	background-color:  rgb(255, 240, 70);
	border: 0px;
}
</style>
<script>



</script>
</head>
<body>
<p>This page demonstrates the use of the 
	Joose based <a href="http://joose-js.blogspot.com/search/label/OR-Mapper">ORM</a> for HTML5 and <a href="http://gears.google.com/">Gears</a> databases. Any notes you create will be saved in a database on your local hard drive, and will be reloaded from that database the next time you visit this page.
	This example was adapted from the <a href="http://webkit.org/misc/DatabaseExample.html">original WebKit HTML5 db example.</a></p>

<button onclick="newNote()">New Note</button>
</body>
</html>
